<template>
    <div class="addStudent-container">
        <n-card
              title="添加学生账号"
              hoverable
        >
            <div class="add-form-container">
                <n-form
                      :model="newStudent"
                      :rules="rules"
                      ref="formRef"
                      label-placement="left"
                      :show-require-mark="false"
                >
                    <n-form-item
                          label="账号"
                          path="studentNumber"
                    >
                        <n-input
                              v-model:value="newStudent.studentNumber"
                              clearable
                        />
                    </n-form-item>
                    <n-form-item
                          label="密码"
                          path="password"
                    >
                        <n-input
                              v-model:value="newStudent.password"
                              clearable
                        />
                    </n-form-item>
                    <n-form-item>
                        <n-popconfirm
                              negative-text="取消"
                              positive-text="确认"
                              @positive-click="addStudent"
                        >
                            <template #trigger>
                                <n-button type="primary">
                                    提交
                                </n-button>
                            </template>
                            确认添加该学生账号吗？
                        </n-popconfirm>
                    </n-form-item>
                </n-form>
            </div>
        </n-card>
    </div>
</template>

<script>
import { defineComponent, ref} from 'vue'
import { useMessage } from 'naive-ui'
import api from '../api'

export default defineComponent({
    name: 'AddStudent',
    setup() {
        const formRef = ref(null)
        const message = useMessage()
        window.$message = useMessage()
        return {
            formRef,
            newStudent: ref({
                studentNumber: '',
                password: ''
            }),
            hasErrors: false,
            rules: {
                studentNumber: [
                    {
                        required: true,
                        message: '请设置账号',
                        trigger: 'blur'
                    },
                    {
                        validator: (rule, value) => {
                            return /^[0-9]{13}$/.test(value)
                        },
                        message: '学号为13位数字',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required:true,
                        message:'请设置密码',
                        trigger: 'blur'
                    },
                    {
                        validator: (rule, value) => {
                            return /^[0-9]{6}$/.test(value)
                        },
                        message: '初始密码为6位数字',
                        trigger: 'blur'
                    }
                ]
            },
            addSuccess() {
                message.success('添加成功')
            },
        }
    },
    data() {
        return {
        }
    },
    methods: {
        validForm() {
            if(/^[0-9]{13}$/.test(this.newStudent.studentNumber) && /^[0-9]{6}$/.test(this.newStudent.password)) {
                this.hasErrors = false
            } else {
                this.hasErrors = true
            }
        },
        async addStudent() {
            if(this.newStudent.studentNumber === '' || this.newStudent.password === '') {
                window.$message.error('请填写完整信息！')
                return
            }
            this.validForm()
            if(this.hasErrors) {
                window.$message.error('请填写正确信息！')
                return
            }
            await api.student.addStudent(this.newStudent)
            this.addSuccess()
        }
    }
})
</script>

<style scoped lang="less">
.addStudent-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin-top: 5%;
    .n-card {
        width: 60%;
        height: 45%;
        padding: 5%;
    }
}
</style>